<template>
<div :class="['addCustomer', 'customer-dialog', reSize ? 'resize-dialog': 'resize-customer']">
  <div class="title" v-show="isTitle">
    <backBtn type="customer" style="margin-left:20px;"></backBtn>
    <span v-if="isTag" class="tag">{{$t('customer.defineCustomer')}}</span>
    <div class="raido-item">
      <el-radio-group  v-model="radio" @change="tab('merge')">
        <el-radio size="mini" v-if="isAdd"  :label="3">{{labelName.add}}</el-radio>
        <el-radio size="mini" v-if="isMerge" :label="6">{{labelName.merge}}</el-radio>
      </el-radio-group>
    </div>
    <div v-if="cdrCallInterfaceBtn && isCallInterfaceButton.status" class="call-ifrem-btn" @click="showCdrCallIframe"><i class="icon-duijie iconfont"></i></div>
    <div v-if="tabType === 'cdr_outbound' && isCallOutInterfaceButton.status" class="call-ifrem-btn" @click="showCdrCallIframe"><i class="icon-duijie iconfont"></i></div>
  </div>

<merge
  v-show="typeCustomer==='merge'"
  @change-merge="mergeCust"
  :select="select"
  :tel="tel"
  :isDailog="isDailog"
  :isDalog="isDalog"
  :callScreen="callScreen"
  :custInfo="customer"
  :jumpMerge = "jumpMerge"
  :bindCustomer="bindCustomer"
  :currentBusinessObj="currentBusiness"
  :isBlight="isBlight"
  @addCustomerSuccess="addCustomerSuccess"
  @editCust="addCustomer"
  @closeDialog="closeDialog">
</merge>

<addcus
  v-show="typeCustomer==='addCus'"
  @change-merge="mergeCust"
  :select="select"
  :tel="tel"
  :isDailog="isDailog"
  :isDalog="isDalog"
  :custInfo="customer"
  :bindCustomer="bindCustomer"
  :currentBusinessObj="currentBusiness"
  :isBlight="isBlight"
  @addCustomerSuccess="addCustomerSuccess"
  @editCust="addCustomer"
  @closeDialog="closeDialog">
</addcus>

</div>
</template>
<script>
  import addcus from './AddCus'
  import merge from './Merge'
  import backBtn from '@/components/public-modules/side-bar/BackSideBar.vue'
  import bus from '@/store/eventBus'
  export default {
    name: 'AddCustomer',
    data () {
      return {
        typeCustomer: 'addcus',
        // 当点击合并客户的模态框时 传值确认是否为true
        clickFlag: '',
        // 从增加页面跳转到合并页面 jumpMerge
        customer: this.custInfo,
        currentBusiness: this.currentBusinessObj,
        form: null,
        maxHeight: 'calc(100vh - 250px)',
        radio: this.labelValue || 3,
        tabType: this.$route.path.split('/')[3]
      }
    },
    props: {
      // 判断该组件是否使用子啊模态框里面
      isDailog: {
        type: Boolean,
        default: false
      },
      // 判断模态框的显示
      isDalog: Boolean,
      cdrCallInterfaceBtn: Boolean,  //  来电弹屏  多个嵌入弹屏展示按钮
      callScreen: Boolean, // 外呼弹屏的标志
      select: String,
      // 单选的label显示
      isTag: {
        type: Boolean,
        default: true
      },
      // 定位客户显示
      isMerge: {
        type: Boolean,
        default: true
      },
      // 添加客户显示
      isAdd: {
        type: Boolean,
        default: true
      },
      // 加入黑名单显示
      isBlight: {
        type: Boolean,
        default: true
      },
      // 整个单选不显示
      isTitle: {
        type: Boolean,
        default: true
      },
      bindCustomer: {
        type: Object,
        default: null
      },
      labelTitle: String,
      // 填写给客户信息的表单
      custInfo: Object,
      clickType: String,
      labelValue: {
        type: Number,
        default: 3
      },
      reSize: {
        type: Boolean,
        default: false
      },
      tel: String,
      // 各个业务的相关信息
      currentBusinessObj: Object,
      phoneBarForm: Object,
      // 添加，合并客户文案
      labelName: {
        type: Object,
        default: function () {
          return {
            add: this.$t('customer.addCustomer'),
            merge: this.$t('customer.mergeCustomer')
          }
        }
      }
    },
    computed: {
      jumpMerge () {
        return ((this.clickFlag === 'merge' || this.labelValue === 6 || this.$route.path.split('/')[2] === 'call') && this.isDailog && this.isTitle)
      },
      isCallInterfaceButton () {
        return this.$store.state.isCallInterfaceButton
      },
      isCallOutInterfaceButton () {
        return this.$store.state.isCallOutInterfaceButton
      }
    },
    components: {
      addcus,
      merge,
      backBtn
    },
    watch: {
      labelValue (cur, old) {
        this.radio = cur
      },
      // 当点击新增客户时，isDalog值会为true 在合并客户那里初始不了from 当点击合并客户radio时，列表不初始化
      isDalog (cur, pre) {
        if (this.radio === 3 && cur) {
          this.$set(this.bindCustomer, 'form', {})
        }
      }
    },
    methods: {
      addCustomerSuccess () {
        this.$emit('addCustomerSuccess')
      },
      addCustomer (form) {
        this.$emit('addCustomer', form)
      },
      tab (clickFlag) {
        if (this.radio === 3) {
          this.typeCustomer = 'addCus'
        } else if (this.radio === 6) {
          this.typeCustomer = 'merge'
        }
        let lable = {
          labelValue: this.labelValue,
          title: this.labelTitle
        }
        this.$emit('changeCustomeLabelValue', lable)
      },
      mergeCust (val) {
        this.$emit('merge', val)
      },
      closeDialog (val) {
        this.$emit('closeDialog', false)
      },
      showCdrCallIframe () {    //   显示 来电弹屏
        let page = document.getElementById('call_interface_wrap')
        let outPage = document.getElementById('call_out_interface_wrap')
        if (this.tabType === 'cdr_outbound' && outPage) {
          outPage.style.display = 'block'
          outPage.classList.add('transIn')
          bus.$emit('callOutIframeGoLeft')
        } else {
          if (page) {
            page.style.display = 'block'
            page.classList.add('transIn')
            bus.$emit('callIframeGoLeft')
          }
        }
      }
    },
    beforeMount () {
      this.radio = this.labelValue
      this.tab()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .resize-customer
    // 单个页面的时候需要这个高度值
    height calc(100vh - 56px)
  .resize-dialog
    height 460px
  .addCustomer
    position relative
    .title
      position relative
      background-color $cf-white
      line-height 39px
      height 39px
      color $cf-gray1
      border-bottom 1px solid $c-border1
      .raido-item
        display inline-block
        margin-left 20px
      .call-ifrem-btn
        cursor pointer
        position absolute
        right 20px
        top 10px
        background-color #459ae9
        height 22px
        width 24px
        text-align center
        line-height 22px
        :after
          border solid transparent
          content ''
          height 0
          right 100%
          position absolute
          width 0
          border-width 11px
          border-right-color #459ae9
        i
          color #fff
          font-size 14px
    span
      &:first-child
        margin-left 20px
        margin-right 30px
  .resize-dialog
    .title
      border-top  1px solid $c-border1
      background-color $c-back
</style>
